{% extends 'sales/base.html' %}
{% load static %}
{% load paginate %}
{% block extralinks %}
{% load thumbnail %}

{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{% url 'accounts:list' %}">Accounts</a></li>
      <li class="breadcrumb-item active">Create Mail</li>
    </ol>
  </nav>
{% endblock breadcrumb %}

{% block content %}

<div class="main_container">
  
  <div class="row marl">
    <div class="col-md-12">
      <form id="add_form" method="POST" action='' novalidate>
        <div class="overview_form_block row marl justify-content-center">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="card-title text-center">
                  Send Mail
                </div>
                <form>
                  <div class="row marl">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="">Contacts</label>
                        
                        
                        <input type="text" placeholder="Contacts" name="recipients" id="_id_recipients">
                      </div>
                      <span id="id_recipients"></span>
                    </div>
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="">Subject</label>
                        <input type="text" class="form-control" name="message_subject" placeholder="Enter Subject">
                      </div>
                      <span id="id_message_subject"></span>
                    </div>
                    <div class="col-md-9">
                      <div class="row">
                        <div class="col-md-4">
                          <div class="form-group">
                            <label><input type="checkbox" name="scheduled_later" value="true" class="scheduled_later">
                              Schedule Later</label>
                            <span id="id_schedule_later"></span>
                          </div>
                        </div>
                        <div class="col-md-4 timezone-div" style="display: none;">
                          <div class="form-group">
                            <label>Timezone</label>
                            <select name="timezone" id="timezone"
                              class="form-control timezone-select js-example-basic-single">
                              <option value="">Select a Timezone</option>
                              {% for timezone in timezones %}
                              <option value="{{timezone.0}}"
                                {% if timezone.0 == settings_timezone %}selected{% endif %}>{{timezone.1}}</option>
                              {% endfor %}
                            </select>
                            <span id="id_timezone"></span>
                          </div>
                        </div>
                        <div class="col-md-4 timezone-div" style="display: none;">
                          <div class="form-group">
                            <label for="">Schedule Date Time</label><span class="error_marker" style="color:red">
                              *</span>
                            <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                              <input type="text" class="form-control datetimepicker-input"
                                data-target="#datetimepicker1" name="scheduled_date_time" />
                              <div class="input-group-append" data-target="#datetimepicker1"
                                data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                              </div>
                            </div>
                            
                            <span id="id_scheduled_date_time"></span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="form-group">
                        <label>Message</label>
                        <div id="editor-container"></div>
                      </div>
                      <input type="hidden" name="message_body" id="html_content">
                      <span id="id_message_body"></span>
                    </div>
                    
                    <div class="col-md-12">
                      <div class="heading">Personalization tags</div>
                      <p class="desc">The following tags can be used on both Plain text or HTML. Add these tags to
                        customize the email template, these tags will be replaced with the associated contact details
                        while the mails are sent.</p>
                      <ul>
                        <li>
                          <strong>Name: </strong>
                          <code>{% templatetag openvariable %} name {% templatetag closevariable %}</code>
                        </li>
                        <li>
                          <strong>Email: </strong>
                          <code>{% templatetag openvariable %} email {% templatetag closevariable %}</code>
                        </li>
                        
                      </ul>
                    </div>
                    <div class="col-md-12 text-center">
                      <button type="submit" class="primary_btn mar_btm save_btn">Send</button>
                      <a href="#" class="primary_btn">Cancel</a>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}
{% block js_block %}

<script>
  $(document).ready(function () {

    // $('[name="schedule_later"]').on('change', function (e) {
    //   if ($(this).is(":checked")) {
    //     $('.timezone-div').show();
    //   } else {
    //     $('.timezone-div').hide();
    //   }
    //   console.log($(this))
    //   console.log($(this).is(':checked'))
    // })
    $(".timezone-select").select2({
      placeholder: "Select a Timezone",
    });

    $('.scheduled_later').on('change', function () {
      // console.log('changed')
      if ($('.check_delete:checked').length > 1) {
        $('.timezone-div').show();
      }
      else {
        $('.timezone-div').hide();
      }
      if ($(this).is(":checked")) {
        $('.timezone-div').show();
      } else {
        $('.timezone-div').hide();
      }
      console.log($(this))
      console.log($(this).is(':checked'))
    })

    $.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
      icons: {
        time: 'fa fa-clock',
        date: 'fa fa-calendar',
        up: 'fa fa-arrow-up',
        down: 'fa fa-arrow-down',
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'far fa-calendar-check-o',
        clear: 'fa fa-trash',
        close: 'fa fa-times'
      }
    });
    $('#datetimepicker1').datetimepicker({
      format: "YYYY-MM-DD HH:mm"
    });

    // $("#id_contacts").select2();
    var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
      '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';

    $('#_id_recipients').selectize({
      persist: false,
      maxItems: null,
      valueField: 'email',
      labelField: 'name',
      searchField: ['name', 'email'],
      // options: [
      // {email: 'brian@thirdroute.com', name: 'Brian Reavis'},
      // {email: 'nikola@tesla.com', name: 'Nikola Tesla'},
      // {email: 'someone@gmail.com'}
      // ],
      options: {{ contacts_list| safe}},
    render: {
      item: function (item, escape) {
        return '<div>' +
          (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
          (item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
          '</div>';
      },
      option: function (item, escape) {
        var label = item.name || item.email;
        var caption = item.name ? item.email : null;
        return '<div>' +
          '<span class="label">' + escape(label) + '</span>' +
          (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
          '</div>';
      }
    },
    createFilter: function (input) {
      var match, regex;

      // email@address.com
      regex = new RegExp('^' + REGEX_EMAIL + '$', 'i');
      match = input.match(regex);
      if (match) return !this.options.hasOwnProperty(match[0]);

      // name <email@address.com>
      regex = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'); match = input.match(regex); if (match) return
      !this.options.hasOwnProperty(match[2]); return false;
    }, create: function (input) {
      if ((new RegExp('^' +
        REGEX_EMAIL + '$', 'i')).test(input)) { return { email: input }; } var match = input.match(new RegExp('^([^<]*)\<'
          + REGEX_EMAIL + '\>$', 'i')); if (match) { return { email: match[2], name: $.trim(match[1]) }; }
      alert('Invalid email address.'); return false;
    } });
  });
  var quill = new Quill('#editor-container', {
    modules: {
      toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['code-block', 'link']
      ]
    },
    placeholder: 'Compose mail...',
    theme: 'snow' // or 'bubble'
  });

  var preciousContent = document.getElementById('myPrecious');
  var justTextContent = document.getElementById('justText');
  var justHtmlContent = document.getElementById('justHtml');

  quill.on('text-change', function () {
    var delta = quill.getContents();
    var text = quill.getText();
    var justHtml = quill.root.innerHTML;
    /*preciousContent.innerHTML = JSON.stringify(delta);
    justTextContent.innerHTML = text;
    justHtmlContent.innerHTML = justHtml;*/
    $('#html_content').val(justHtml);
  });


  $('.save_btn').click(function (e) {
    e.preventDefault();
    $("form#add_form").submit()
  })

  $('form#add_form').ajaxForm({
    type: 'POST',
    dataType: 'json',
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function (data) {
      console.log("data", data)
      if (data.error == false) {
        window.location = "{% url 'accounts:list' %}";
      } else {
        /*$(document).ajaxStop($.unblockUI);*/
        // $.unblockUI();
        $('p.failure').remove();
        for (var key in data.errors) {
          $('#id_' + key).html('<p class="error failure"> *' + data.errors[key] + '</p>');
        }
      }
    },
    error: function (xhr, errmsg, err) {
      console.log('error data', errmsg, err)
    }
  });
</script>
{% endblock js_block %}